<template>
  <!-- 应用根容器 -->
  <div class="app-container">
    <!-- 路由视图出口 -->
    <router-view v-slot="{ Component }">
      <!-- 添加过渡动画 -->
      <transition name="fade" mode="out-in">
        <!-- 占位符 -->
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
// 这里可以放置一些全局逻辑
import { onMounted } from 'vue'
import { useAuthStore } from '@/store/auth'

// 初始化检查用户登录状态
const authStore = useAuthStore()
onMounted(() => {
  // 检查本地存储中是否存在token
  if (localStorage.getItem('token')) {
    authStore.isAuthenticated = true
    // 这里可以添加获取用户信息的逻辑
  }
})
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 路由切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<style>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, sans-serif;
}

/* 覆盖Element Plus默认样式 */
.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-button {
  border-radius: 4px;
}

/* 全局表单样式 */
.el-form-item__label {
  font-weight: 500;
}
</style>
